<template>
	<view class="top-container">
		<!-- banner区域 -->
		<view class="banner-container">
			<up-swiper :list="list1" height="250"></up-swiper>
		</view>
		<!-- 内容区域 -->
		<view class="content-container">
			<!-- 状态栏 -->
			<view class="status-container" :style="{ height: statusHeight + 'px' }"></view>
			<!-- 胶囊区 -->
			<view class="capsule-zone" :style="{ height: capsuleZoneHeight ? capsuleZoneHeight + 'px' : '40px' }">
				<view class="capsule-left">
					<text class="iconfont icon-dingwei"></text>
					<text>{{ address }}</text>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<!-- 消息 小程序没有别的平台有 -->
				<view class="capsule-right">
					<text class="iconfont icon-xiaoxi"></text>
					<view class="ide"></view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 搜索框 -->
			<view class="search-container">
				<up-search placeholder="请输入您要搜索的内容" bgColor="#fff" v-model="keyword" :showAction="false"></up-search>
				<up-button type="primary" text="搜索" shape="circle" size="small" style="width: 15px"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useSystemInfo } from '@/mixins/index.js';

//顶部相关
//小程序状态栏和胶囊区的高度
const { statusHeight, capsuleZoneHeight } = useSystemInfo();
const address = ref('泰华金贸4号楼');
//轮播图
const list1 = ref(['https://mms1.baidu.com/it/u=3753030857,2825254106&fm=253&app=138&f=JPEG?w=750&h=380']);
//搜索
const keyword = ref('');
</script>

<style lang="scss" scoped>
view.top-container {
	position: relative;
	view.banner-container {
	}

	view.content-container {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		padding: 0 20upx;
		view.capsule-zone {
			display: flex;
			align-items: center;
			justify-content: space-between;
			view.capsule-left {
				color: #fff;
				display: flex;
				align-items: center;
				text.icon-xiangyou1 {
					margin-top: 6upx;
				}

				text {
				}
			}
			view.capsule-right {
				text.iconfont {
				}
				// #ifndef MP-WEIXIN
				view.ide {
					width: 10upx;
					height: 10upx;
					background-color: #ff0000;
					border-radius: 50%;
				}
				// #endif
			}
		}

		view.search-container {
			display: flex;
			background-color: #fff;
			padding: 5upx 10upx 5upx 0;
			align-items: center;
			border-radius: 40upx;
			margin-top: 10upx;
		}
	}
}
</style>
